<script setup>
import $ from "jquery";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css"
import "slick-carousel/slick/slick.min.js";
import {onMounted, ref} from "vue";

const swiper = ref(null);
onMounted(() => {
  $(swiper.value).slick({
    infinite: false,
    slidesToShow: 5,
    slidesToScroll: 1
  })
})

</script>

<template>
  <div class="slick-carousel">
    <div id="multi-item-carousel" ref="swiper">
      <slot></slot>
    </div>
  </div>
</template>

<style lang="less">
.slick-carousel {
  padding: 0 50px;
}
#multi-item-carousel {
  //padding: 0 50px;
}
.slick-prev, .slick-next {
  width: 40px;
  height: 40px;
}
.slick-prev::before,
.slick-next::before {
  color: black;
  font-size: 40px;
}
</style>
